<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
  <meta charset="UTF-8">
  <title>vue基础</title>
  <!-- 开发环境版本，包含了用帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <!-- 生产环境版本，优化了尺寸和速度 -->
  <!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->
</head>
<body>
<div id="app">
<!-- 模板语法{{}}  在括号内 直接写数据中变量,就可以把数据渲染到页面中 里面可以下js简单表达式 -->
  {{msg}} {{ true ? msg : false}}
  {{msg.split('')[1]}}

<!--v-model 单输入和应用状态之间的双向绑定 输入框的value和我们的data属性中的变量做绑定
        .trim去除首尾空格 .number输入数据变为数字 .lazy懒加载,input失去焦点时进行改变
    ref:给元素或者子组件注册引用信息,注册在$refs对象上   -->
  <input type="text" v-model="msg" ref="inputMode">

<!-- v-bind:指令名字='指令的表达式'  绑定标签的属性,值可以写data中的变量 -->
  <p v-bind:title="msg">v-bind:title</p>

  
<!-- v-html 将数据变成dom节点,渲染到该元素
     v-once 数据只渲染一次，不会双向绑定 -->
  <div v-html = "html"></div>
  <div v-once = "msg">{{msg}}</div>

<!--v-on  绑定方法 添加一个事件监听器 传$event||event代表当前事件对象(无参数，默认传)
    v-on:dblclick 双击 更多事件名可以查看原生js事件文档
    v-on:keyup 按下按键时执行函数
    v-on:input 向<input>中尝试输入时执行函数(v-model的语法糖)
	  v-on:click.native  使用原生事件
    事件修饰符  .stop阻止冒泡 .prevent阻止默认 .once只触发一次 更多查看vue官网 
    按键修饰符(可联合使用) .enter .space .13按键码enter .shift .meta .tab .delete .up .down .left .right
    系统修饰符(必须联合其他按键一起按才会生效) -->
  <a v-on:click.prevent href="https://www.baidu.com">v-on:click.prevent="fun"</a>
  <button @click.stop="fun(23,$event)">v-on:click="fun(23,$event)"</button>
  <input type="text" @keyup.esc.space="keyup" value="按下esc&&空格键才触发">
  <button type="button" @click.meta="keyup">按下win键+鼠标左键才有用</button>
  <input type="text" :value="msg" @input = 'msg = $event.target.value'>
</div>

<script type="text/javascript">
  // 创建Vue实例 想创建多个vue实例,只要new Vue()多个就行
  let app = new Vue({
    // 实例的挂载点
    el: "#app", // 实例控制的元素 该实例的方法只能操作该元素数据,操作的一定是html中的根容器(#app)
    // 实例中的数据   在此实例外可以直接用app.msg来操作该属性,app(实例名)
    data: {
      msg: '这是数据',
      html: "<h1>33</h1>",
    },
    // 实例中的方法,this代表当前vue实例
    methods: {
      fun: function (data,event) {
        console.log(event);
        this.msg = this.msg.split('').reverse().join('');//逆转信息
      },
      keyup: function (event) {
        alert('输入了回车键')
        console.log(this.$refs('inputMode'))
      }
    },
    /**生命周期 https://blog.csdn.net/wasbb_mm/article/details/83861456
     * --创建&挂载--
     * 1.构造函数生成vue实例 new Vue() 
     * 2.初始化事件&生命周期
    beforeCreate() Vue实例创建前,vue实例中的el,data,data中的message都为undefined
     * 3.初始化注入&校验
    created() 实例创建后,el还是undefined，而数据已经与data中的属性进行绑定
     * 4.检测是否有el对象 
     *   无el对象,就检测Vm.$mount(el),有没有设置这个el对象,有就挂载他(el)
     *     new Vue().$mount(el) ==> $mount用法
     * 5.检测是否制定template模板
     * 6.有模板:将template编译到render函数
     *   无模板:将el外部的html作为template编译
    beforeMount() 组件挂载前,页面未展示,还只是虚拟dom,完成了data和el数据初始化
     * 7.创建Vm.$el并用其替换el
    mounted() 编译完了,挂载完成,用户已经能看到页面了。这个方法执行后dom树渲染到页面(因为可能会在这个函数操纵dom)
     * 8.挂载完成
     * --更新--
     * 1.当date被修改时
    beforeUpdate() 组件更新前,数据有更新被调用,此处更改数据不会触发附加的重渲染过程
     * 2.虚拟dom重新渲染并应用更新
    updated 组件更新后,dom也重新render完成
     * --销毁--
     * 1.调用Vm.$destroy()
    beforeDestroy() 销毁之前,还可以访问实例数据
     * 2.接触绑定,销毁组件以及事件监听器
     * 3.销毁完毕
    destroyed() 销毁之后,Dom元素存在,只是不再受vue控制
     * 如果使用构造生成文件(例如构造单文件组件),模板编译将提前执行
     * 9 错误机制
     errorCaptured()
     * 当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串
     * 10 缓存
     activated() 被 keep-alive 缓存的组件激活时调用
     deactivated() 被 keep-alive 缓存的组件停用时调用
    */
  })
</script>


</body>
</html>